<#include "../common/_layout.html" />
<@layout>

    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
        document.onkeydown=nextpage
        document.onkeydown=nextpage
        var prevpage="rank/?p=${userList.pageNumber-1}<#if userList.pageSize!=20>&s=${userList.pageSize}</#if>"
        var nextpage="rank/?p=${userList.pageNumber+1}<#if userList.pageSize!=20>&s=${userList.pageSize}</#if>"
        function nextpage(event)
        {
            event=event?event:(window.event?window.event:null);
            <#if userList.pageNumber&gt;1>if(event.keyCode==37)location=prevpage;</#if>
            <#if userList.pageNumber<userList.totalPage>if(event.keyCode==39)location=nextpage;</#if>
        }
        });
    </script>

    <div class="pagination pagination-centered">
    	<div class="pull-left">
    	<form class="form-search" action="user/search">
    		<div class="input-append">
    		<input type="text" class="input-medium search-query" name="word" placeholder="Search user">
    		<button type="submit" class="btn">Search</button>
    		</div>
    	</form>
    	</div>
        <ul>
        <li class="<#if userList.pageNumber==1>disabled</#if>"><a href="rank/?p=1<#if userList.pageSize!=20>&s=${userList.pageSize}</#if>">&lt;&lt;</a></li>
        <#if userList.pageNumber&gt;1><li><a href="rank/?p=${userList.pageNumber-1}<#if userList.pageSize!=20>&s=${userList.pageSize}</#if>">Prev</a></li></#if>
        <#if userList??>
        <#assign start=userList.pageNumber-3>
        <#assign end=userList.pageNumber+3>
        <#if start<1><#assign end=end-start+1><#assign start=1></#if>
        <#if end&gt;userList.totalPage ><#assign start=start-(end-userList.totalPage)-1><#if start<1><#assign start=1></#if><#assign end=userList.totalPage></#if>
        <#if end<start><#assign end=start></#if>
        	<#list start..end as x>
        	<li class="<#if x==userList.pageNumber>active</#if>"><a href="rank/?p=${x}<#if userList.pageSize!=20>&s=${userList.pageSize}</#if>">${x}</a></li>
        	</#list>
        </#if>
        <#if userList.pageNumber<userList.totalPage><li><a href="rank/?p=${userList.pageNumber+1}<#if userList.pageSize!=20>&s=${userList.pageSize}</#if>">Next</a></li></#if>
        <li class="<#if userList.pageNumber&gt;=userList.totalPage>disabled</#if>"><a href="rank/?p=${userList.totalPage}<#if userList.pageSize!=20>&s=${userList.pageSize}</#if>">&gt;&gt;</a></li>
        </ul>
        <div class="pull-right">
        	<span class="badge badge-info">${userList.pageNumber}/${userList.totalPage} Pages</span>
        	<span class="badge badge-info">${userList.totalRow} Users</span>
        </div>
    </div>
    
    <table id="user-rank" class="table table-hover table-condensed">
        <thead>
          <tr>
            <th>Rank</th>
            <th>User</th>
            <th>Nick Name</th>
            <th>Solved</th>
            <th>Submit</th>
            <th>Ratio</th>
          </tr>
        </thead>
        <tbody>
        <#if userList??>
        <#list userList.list as User>
        <tr>
            <td>${User.rank!}</td>
            <td><a href="user/profile/${User.name!}" <#if adminUser?? && User.realname??>data-toggle="tooltip" title="${(User.realname)!}"</#if>>${User.name!}</a></td>
            <td>${User.nick!}</td>
            <td><a href="status?name=${User.name!}&result=0">${User.solved!}</a></td>
            <td><a href="status?name=${User.name!}">${User.submit!}</a></td>
            <td><#if User.submit&gt;0>${(User.solved/User.submit*100)?int}<#else>0</#if>%</td>
        </tr>
        </#list>
        </#if>
        </tbody>
    </table>

    <script type="text/javascript" src="assets/js/placeholder.js"></script>
    
    <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css">
    <script src="assets/tablecloth/js/jquery.metadata.js"></script>
    <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
    <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
                
        $("#user-rank").tablecloth({
          theme:"stats",
          condensed:true,
          sortable:true,
          striped:true,
          clean:true
        });
    });
    </script>

</@layout>